<template>
    <div class="tab-body-item">
        <p class="tip text-center">每天晚上8点开始直播，点击按钮即可观看！</p>
        <div class="panel-goods panel">
            <div class="panel-header clearfix">
                <div class="panel-header-title pull-left">全部商品  |  2件</div>
                <a href="" class="option pull-right">进入店铺</a>
            </div>
            <div class="panel-body">
                <div class="goods-list">
                    <ul>
                        <li>
                            <div class="media clearfix">
                                <div class="media-object pull-left"><img src="../img/goods_1.png" alt=""></div>
                                <div class="media-body over-hidden">
                                    <h4 class="media-heading">作品名称：山里云中歌</h4>
                                    <p class="media-desc"><span>￥9000.00</span></p>
                                    <div class="media-footer clearfix">
                                        <span class="pull-left">￥4500</span>
                                        <a href="#" class="button button-outline">加入购物车</a><a href="#" class="button button-fill">立即购买</a>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="media clearfix">
                                <div class="media-object pull-left"><img src="../img/goods_1.png" alt=""></div>
                                <div class="media-body over-hidden">
                                    <h4 class="media-heading">作品名称：山里云中歌</h4>
                                    <p class="media-desc"><span>￥9000.00</span></p>
                                    <div class="media-footer clearfix">
                                        <span class="pull-left">￥4500</span>
                                        <a href="#" class="button button-outline">加入购物车</a><a href="#" class="button button-fill">立即购买</a>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="media clearfix">
                                <div class="media-object pull-left"><img src="../img/goods_1.png" alt=""></div>
                                <div class="media-body over-hidden">
                                    <h4 class="media-heading">作品名称：山里云中歌</h4>
                                    <p class="media-desc"><span>￥9000.00</span></p>
                                    <div class="media-footer clearfix">
                                        <span class="pull-left">￥4500</span>
                                        <a href="#" class="button button-outline">加入购物车</a><a href="#" class="button button-fill">立即购买</a>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="media clearfix">
                                <div class="media-object pull-left"><img src="../img/goods_1.png" alt=""></div>
                                <div class="media-body over-hidden">
                                    <h4 class="media-heading">作品名称：山里云中歌</h4>
                                    <p class="media-desc"><span>￥9000.00</span></p>
                                    <div class="media-footer clearfix">
                                        <span class="pull-left">￥4500</span>
                                        <a href="#" class="button button-outline">加入购物车</a><a href="#" class="button button-fill">立即购买</a>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
    };
  },
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
$red: #e24241;
.tab-body-item {
    flex: 1;
    height: 100%;
    background: #eceded;
    .tip{
        font-size: 26px;
        color:#7d5604;
        line-height: 60px;
        background-color: #fcba2e;
    }

    .panel-header {
        height: 60px;
        padding: 0 35px;
        font-size: 28px;
        color: #2a2a2a;
        line-height: 60px;
        .option{ color: $red; }
    }

    .goods-list {
        background-color: #fff;
        ul {
            padding: 0 35px;
        }

        .media {
            display: block;
            padding: 25px 0;
            position: relative;
            &::before {
                content: '';
                display: block;
                width: 100%;
                height: 2px;
                background-color: #f0f0f0;
                position: absolute;
                left: 0;
                bottom: 0;
            }
        }
        .media-object {
            width: 200px;
            height: 154px;
            margin-right: 20px;
        }
        .media-heading {
        font-size: 28px;
        line-height: 45px;
        color: #2a2a2a; 
        }

        .media-footer {
            font-size: 0;
            height: 60px;
            line-height: 60px;
            text-align: right;
            span {
                font-size: 30px;
                color: $red;
            }

            .button {
                display: inline-block;
                width: 136px;
                height: 60px;
                margin-left: 10px;
                font-size: 24px;
                line-height: 60px;
                text-align: center;
                border-radius: 4px;
                &.button-fill{
                    color: #fff;
                    background-color: $red;
                }

                &.button-outline {
                    border: 2px solid $red;
                    color: $red;
                    background-color: #fff;
                }
            }        
        }

        .media-desc {
            font-size: 24px;
            line-height: 2;
            span {
                color: #888;
                text-decoration: line-through;
            }
        }
    }


}
</style>